<template>
  <div class="jigou_list_page">
    <div class="step_list">
      <div class="step_item">
        <img src="@/assets/production/jigouList/step_1.png" alt="" class="img">
        <div class="name">申请授信</div>
      </div>
      <img src="@/assets/production/jigouList/arrow_right.png" alt="" class="arrow_right" />
      <div class="step_item">
        <img src="@/assets/production/jigouList/step_2.png" alt="" class="img">
        <div class="name">申请融资</div>
      </div>
      <img src="@/assets/production/jigouList/arrow_right.png" alt="" class="arrow_right" />
      <div class="step_item">
        <img src="@/assets/production/jigouList/step_3.png" alt="" class="img">
        <div class="name">银行放贷</div>
      </div>
    </div>
    <div class="data_list">
      <div class="data_item mod" v-for="item in list" :key="item.id">
        <div class="status gray" v-if="item.status === '0'">未授信</div>
        <div class="status gray" v-else-if="item.status === '1'">停用</div>
        <div class="status blue" v-else-if="item.status === '10'">等待授信审核</div>
        <div class="status green" v-else-if="item.status === '30'">已授信</div>
        <div class="status gray" v-else-if="item.status === '40'">授信失败</div>
        <div class="production_box">
          <div class="bank_logo_box">
            <div class="jigou_name">{{ item.jigouName }}</div>
            <div class="production_name">{{ item.projectName }}</div>
          </div>
          <div class="financing_list">
            <div class="financing_item">
              <div class="key">融资模式：</div>
              <div class="value">多元化融资模式</div>
            </div>
            <div class="financing_item">
              <div class="key">担保方式：</div>
              <div class="value">多元化融资模式</div>
            </div>
            <div class="financing_item">
              <div class="key">业务区域：</div>
              <div class="value">多元化融资模式</div>
            </div>
          </div>
        </div>
        <div class="tag_list">
          <div class="tag_item">普惠金融</div>
          <div class="tag_item">x级供应商</div>
          <div class="tag_item">无担保</div>
          <div class="tag_item">无抵押</div>
        </div>
        <div class="financing_rule_box">
          <div class="financing_rule_list">
            <div class="financing_rule_item">
              <div class="key">综合融资利率</div>
              <div class="value red">{{ item.financingRate }}%</div>
            </div>
            <div class="financing_rule_item">
              <div class="key">融资金额（元</div>
              <div class="value">10-1000</div>
            </div>
            <div class="financing_rule_item">
              <div class="key">融资期限（月）</div>
              <div class="value">3-36</div>
            </div>
          </div>
          <el-button
            :type="item.status === '1' || item.status === '40' ? 'info' : 'primary'" class="btn"
            :disabled="item.status === '1' || item.status === '40'"
            @click="btnClick(item)"
          >
            申请授信
          </el-button>
        </div>
        <div class="desc">产品要求：需银行账户、需项目准入、需签订协议、提供贸易背景材料</div>
      </div>
    </div>
    <Pagination
      class="pagination_mod"
      :hidden="pagination.total === 0"
      :total="pagination.total"
      :page-size="pagination.pageSize"
      :current-page="pagination.pageNum"
      :limit="10"
      @pagination="paginationChange"
    />
    <CustomDialog
      title="温馨提示"
      :visible="dialogVisible"
      :buttonArray="[
        {
          text: '确定',
          clickFn: closeDialog
        }
      ]"
      @close="closeDialog"
      class="dialog"
    >
      <div class="dialog_c">
        <h5 class="mask_text">授信正在审核中</h5>
        <div class="sub_mask_text">请您随时关注授信申请进度和审核结果</div>
        <!-- <el-button type="primary" class="btn" @click="dialogVisible = false">确 定</el-button> -->
      </div>
    </CustomDialog>
  </div>
</template>

<script>
import { jigouList } from '@/api/production'
import Pagination from '@/components/Pagination'
import CustomDialog from '@/customComponents/dialog'

export default {
  components: {
    Pagination,
    CustomDialog,
  },
  data() {
    return {
      list: [],
      pagination: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
      },
      dialogVisible: false,
    }
  },
  mounted() {
    this.getJigouList()
  },
  methods: {
    getJigouList() {
      this.loading = true
      jigouList({
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize
      }).then((res) => {
        if (res.code === 200) {
          this.loading = false
          this.list = res.rows
          this.pagination.total = res.total
        }
      }).catch(() => {
        this.loading = false
      })
    },
    paginationChange({ page: pageNum, limit: pageSize }) {
      this.pagination.pageNum = pageNum
      this.pagination.pageSize = pageSize
      this.getJigouList()
    },
    btnClick(item) {
      // status: 0未申请授信; 1停用（按钮不可点击）; 10：等待审核; 30：已授信; 40：审核失败（按钮不可点击）;
      switch(item.status) {
        case '0':
          this.$router.push({
            path: '/productionCenter/addCredit',
            query: {
              financingConfigId: item.id,
              hexinName: item.hexinName,
              jigouName: item.jigouName,
            }
          })
          break;
        case '1':
          // 不可点击
          break;
        case '10':
          this.dialogVisible = true
          break;
        case '30':
          this.$router.push({
            path: '/productionCenter/addFinancing',
            query: {
              financingConfigId: item.id,
              hexinName: item.hexinName,
              jigouName: item.jigouName,
            }
          })
          break;
        case '40':
          // 不可点击
          break;
      }
    },
    closeDialog() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';

.jigou_list_page {
  .step_list {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    background: linear-gradient(to bottom, #DFEFFF, #FFFFFF);
    box-shadow: 0 2px 6px 0 rgba(1, 24, 70, 0.10);
    border-radius: 6px;
    margin-bottom: 16px;
    .step_item {
      .img {
        display: block;
        width: 140px;
        height: 140px;
      }
      .name {
        color: $theme;
        font-size: 22px;
        text-align: center;
      }
    }
    .arrow_right {
      display: block;
      width: 170px;
      height: 78px;
      margin: 0 100px;
    }
  }
  .data_list {
    .data_item {
      position: relative;
      &.mod {
        padding: 30px 40px;
        border-radius: 4px;
        box-shadow: 0 2px 6px 0 rgba(1, 24, 70, 0.09);
        background-color: #fff;
        margin-bottom: 16px;
      }
      .status {
        height: 34px;
        line-height: 34px;
        padding: 0 20px;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        border-radius: 0 0 0 34px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        &.gray {
          background: linear-gradient( 90deg, #CDCFD1 0%, #C8CBCD 100%);
        }
        &.blue {
          background: linear-gradient( 90deg, #69ADFF 0%, #2F87FF 100%);
        }
        &.green {
          background: linear-gradient( 90deg, #5ED025 0%, #45D167 100%);
        }
      }
      .production_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        .bank_logo_box {
          display: flex;
          align-items: center;
          .bank_logo {
            display: block;
            width: 160px;
            height: 48px;
            margin-right: 18px;
          }
          .jigou_name {
            color: #333;
            font-size: 22px;
            font-weight: 600;
          }
          .production_name {
            color: #333;
            font-size: 20px;
            font-weight: 500;
          }
        }
        .financing_list {
          display: flex;
          align-items: center;
          margin-right: 40px;
          .financing_item {
            display: flex;
            align-items: center;
            margin-right: 60px;
            .key {
              color: #777;
              font-size: 14px;
            }
            .value {
              color: #333;
              font-size: 14px;
            }
          }
        }
      }
      .tag_list {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        .tag_item {
          height: 24px;
          line-height: 24px;
          border-radius: 3px;
          border: 1px solid #BBD3FF;
          background-color: #F4FAFF;
          padding: 0 6px;
          margin-right: 12px;
          color: $theme;
          font-size: 12px;
        }
      }
      .financing_rule_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 28px;
        .financing_rule_list {
          flex: 1 1 auto;
          display: flex;
          align-items: center;
          .financing_rule_item {
            width: 33.33%;
            .key {
              color: #777;
              font-size: 16px;
              margin-bottom: 19px;
            }
            .value {
              color: #333;
              font-size: 36px;
              font-weight: 500;
              &.red {
                color: #FF4D4F;
              }
            }
          }
        }
        .btn {
          margin-left: 24px;
        }
      }
      .desc {
        height: 30px;
        line-height: 30px;
        background-color: #F4FAFF;
        border-radius: 6px;
        padding: 0 12px;
        color: #333;
        font-size: 14px;
      }
    }
  }
  .pagination_mod {
    padding: 20px 40px;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(1, 24, 70, 0.09);
    background-color: #fff;
  }
  .dialog {
    .mask_text {
      text-align: center;
      margin: 22px auto 24px;
      color: #032944;
      font-size: 16px;
      font-weight: 500;
    }
    .sub_mask_text {
      text-align: center;
      margin: 22px auto 24px;
      color: #032944;
      font-size: 16px;
    }
    .mask_btn {
      display: block;
      margin: 0 auto;
      outline: none;
      width: 82px;
      height: 32px;
      border-radius: 3px;
      border: none;
      background-color: $theme;
      line-height: 32px;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      &:hover {
        background-color: #508DFF;
      }
    }
  }
}
</style>
